const path = require('path')

const webpack = require('webpack')	//热更新第二步

const htmlWebpackPlugin = require('html-webpack-plugin')

const { VueLoaderPlugin } = require('vue-loader')

module.exports =  {
	entry: path.join(__dirname,'./src/main.js'),//入口路径，webpack打包那个文件
	output: {//出口路径
		path: path.join(__dirname,'./dist'),
		filename: 'bundle.js'//创建的名称
	},
	devServer: {
		open: true, //自动打开浏览器
		port: 8080, //设置启动时运行端口
		contentBase: 'src', //制定托管的根目录
		hot: true,	//热更新需要三步,热更新第一步
		
	},
	mode: "development",
	plugins: [		//插件的意思，webpack里面尾部带s字母的都是数组！！！
		new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象，热更新第三步
		new htmlWebpackPlugin({
			template: path.join(__dirname,'./src/index.html'),  //制定的模板页面，会根据制定路劲生成页面
			filename: 'index.html' //生成页面得名称
		}),
		new VueLoaderPlugin()
	],
	module:{ //这个节点用于配置所以第三方模块 加载器 loader
		rules: [ //匹配规则
			{ test: /\.css$/, use: ['style-loader','css-loader'] }, //loader是右往左调用 css的配置
			{ test: /\.less$/, use: ['style-loader','css-loader','less-loader'] }, //less得配置
			{ test: /\.scss$/, use: ['style-loader','css-loader','sass-loader'] }, //scss的配置
			{ test: /\.(jpg|png|gif|bmp|jpeg|ico)$/, use: 'url-loader?limit=9662&name=[hash:8]-[name].[ext]'},
			{ test: /\.(ttf|eot|woff|woff2)$/, use: 'url-loader'},
			// { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,  loader: "file" },
			// { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
			// { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
			// { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
			//JS文件ES6语法的
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },//配置babel转换ES6语法 
			{ test: /\.vue$/, use: 'vue-loader'}, //配置.vue文件的
		]
	},
	resolve: {
	  alias: {
	  		"vue$": "vue/dist/vue.js" //修改Vue导入包的路径
		}
	}
}